<template>
	<!-- 忘记密码验证邮箱 -->
	<view>
		<navBar></navBar>
		
		<view class="title">
			<h2>验证邮箱</h2>
		</view>

		<view class="forms">
			<u-form :model="form" ref="uForm" label-width="150">
				<u-form-item label="邮箱" prop="email">
					<u-input v-model="form.email" maxlength="23" trim placeholder="请输入邮箱" />
				</u-form-item>
				<u-form-item label="验证码" prop="captcha">
					<u-input v-model="form.captcha" maxlength="6" trim placeholder="请输入验证码" />
					<u-button size="mini" @tap="getCode" type="primary">{{tips}}</u-button>
				</u-form-item>
				<u-form-item label="修改密码" prop="pwd">
					<u-input type="password" placeholder="请输入密码" v-model="form.pwd" maxlength="15" trim />
				</u-form-item>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
				</u-verification-code>
			</u-form>
		</view>

		<view class="btn">
			<u-button @tap="yanzhen" type="error">修改密码</u-button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getCaptcha,
		yanzhengEmail,
		changePassword,
		userLogout,
		changePassword2
	} from '../../utils/user.js'

	export default {
		data() {
			return {
				form: {
					email: '',
					captcha: '',
					pwd:''
				},

				passwordType: '',
				user_id: '',

				seconds: 60,
				tips: '',
				
				rules:{
					captcha: [
						// 对验证码字段进行长度验证
						{
							min: 4,
							message: '验证码不能少于4个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写验证码',
							trigger: ['change', 'blur']
						},
					],
					email: [
						// 对邮箱字段进行长度验证
						{
							min: 10,
							message: '邮箱不能少于10个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '邮箱格式错误',
							trigger: ['change', 'blur']
						},
						// 对邮箱字段进行必填验证
						{
							required: true,
							message: '请填写邮箱',
							trigger: ['change', 'blur']
						},
					],
					pwd: [
						// 对密码字段进行长度验证
						{
							min: 8,
							message: '密码不能少于8个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写密码',
							trigger: ['change', 'blur']
						},
					],
				}
			};
		},
		methods: {
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			codeChange(text) {
				this.tips = text;
			},
			//获取验证码
			async getCode() {
				if (this.form.email === '') {
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(async () => {
						let result = await getCaptcha(this.form.email)
						uni.hideLoading();
						if (result.code === 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else if (result.code === 515) {
							this.$refs.uToast.show({
								title: '您的账号已被封禁，请联系开发者',
								type: 'error',
								duration: 1000,
							})
						} else {
							this.$refs.uToast.show({
								title: '出现了不知名错误',
								type: 'error',
								duration: 1000,
							})
						}
					}, 500);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//用户退出
			async userLogouted() {
				let result = await userLogout(this.user_id)
				if (result.code === 200) {
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						duration: 1000,
						isTab: true,
						url: '/pages/center/center'
					})
				}
			},
			//修改密码
			async yanzhen() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						//先验证验证码是否正确
						let result = await yanzhengEmail(this.form.email, this.form.captcha)
						if (result.code === 200) {
							//如果正确去执行修改密码
							if (this.passwordType === '1') {
								let data = {
									user_id: this.user_id,
									newpwd: this.form.pwd
								}
								let result = await changePassword(data)
								if (result.code === 200) {
									this.userLogouted()
								}else if(result.code === 515){
									this.$refs.uToast.show({
										title: '您的账号已被封禁，请联系开发者',
										type: 'error',
										duration: 1000
									})
								}else{
									this.$refs.uToast.show({
										title: '出现不知名错误',
										type: 'error',
										duration: 1000,
									})
								}
							} else {
								let data = {
									email: this.form.email,
									newpwd: this.form.pwd
								}
								let result = await changePassword2(data)
								if (result.code === 200) {
									this.$refs.uToast.show({
										title: '修改成功',
										type: 'success',
										duration: 1000,
										isTab: true,
										url: '/pages/center/center'
									})
								}else if(result.code === 515){
									this.$refs.uToast.show({
										title: '您的账号已被封禁，请联系开发者',
										type: 'error',
										duration: 1000
									})
								}else{
									this.$refs.uToast.show({
										title: '出现不知名错误',
										type: 'error',
										duration: 1000
									})
								}
							}
							this.form.email = this.form.captcha = this.form.pwd = ''
						} else {
							this.$refs.uToast.show({
								title: '验证码出错',
								type: 'error',
								duration: 1000,
							})
						}
					}
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.user_id = uni.getStorageSync('userInfo').user_id
			this.passwordType = option.type
		}
	}
</script>

<style lang="scss">
	.title{
		padding-top: 60rpx;
		width: 25%;
		margin:  0 auto;
	}
	.forms {
		padding: 80rpx 0;
		width: 80%;
		margin: 0 auto;
	}
	
	.btn{
		width: 30%;
		margin: 0 auto;
		
	}
</style>
